<template>
  <div class="flex-1 overflow-hidden flex flex-col">
    <!--患者列表 -->
    <SearchComb v-model:value="searchState" placeholder="卡号/姓名/助记码/手机号" @search="queryList(0)" />
    <div class="my-2">
      <a-radio-group v-model:value="typeState" button-style="solid" class="flex radio-style" @change="queryList">
        <a-radio-button v-for="(item, index) in typeList" :key="index" :value="item.typeState">{{ item.title }}({{ item.total }})</a-radio-button>
      </a-radio-group>
    </div>
    <BaseList :data-source="dataSource" :loading="loading" class="flex-1 overflow-auto w-[300px]">
      <template #renderItem="{ item }">
        <div class="py-3 px-3 !mt-0 flex justify-between items-center" :class="selectedItem?.lsh === item.lsh ? 'active' : ''" @click="onSelect(item)">
          <div class="w-11/12">
            <div>
              <div class="flex items-start justify-between">
                <div class="text-base font-bold text-primary truncate w-1/3 mb-2" :title="item.brName">{{ item.brName }}</div>
                <div class="text-base mb-2 text-right w-2/3 truncate overflow-hidden" :title="item.itemName">{{ item.itemName }}</div>
              </div>
            </div>
            <div class="flex items-center justify-between">
              <div class="w-1/5 flex">
                <span class="text-greymr-2">{{ item.brXb }}</span>
                <span class="w-[50px] text-right inline-block text-grey">{{ item.brAge }}</span>
              </div>
              <div class="w-4/5 flex">
                <a-tag v-if="item.status === 0" color="red" class="ml-2">候诊</a-tag>
                <a-tag v-if="item.status === 3" color="green" class="ml-2">就诊</a-tag>
                <!-- <a-tag v-if="item.status === 1" color="blue" class="ml-2">结束</a-tag> -->
                {{ dayjs(item.yyrq).format('MM-DD') + ' ' + item.yysj }}
                <LabelValue class="text-right" :class="{ 'text-red-600': item.isCurrentEmp === 1 }" :width="66" :value="item.djys" />
              </div>
            </div>
          </div>
          <div class="w-1/12">
            <a-dropdown placement="bottomLeft" :get-popup-container="(trigger) => trigger.parentNode">
              <template #overlay>
                <a-menu class="text-center">
                  <a-menu-item v-for="(action, i) in actionArray" :key="i">
                    <BaseButton size="small" type="link" @click="onClickServe(item, action.value)">{{ action.title }}</BaseButton>
                  </a-menu-item>
                </a-menu>
              </template>
              <div class="px-1 py-1 hover:bg-slate-200 rounded">
                <MoreOutlined class="text-base text-[#3758f1]" />
              </div>
            </a-dropdown>
          </div>
        </div>
      </template>
    </BaseList>
    <Serves v-model:open="tabOpen" :row-data="selectedItem" @success="queryList" />
  </div>
</template>
<script setup>
import { ref } from 'vue'
import { message } from 'ant-design-vue'
import dayjs from 'dayjs'
import { MoreOutlined } from '@ant-design/icons-vue'
import { post } from '@/utils/request'
import BaseList from '@/components/BaseList'
import SearchComb from '@/components/SearchComb'
import LabelValue from '@/components/LabelValue'
// import useUserStore from '@/store/user'
import useStore from '../store'
import Serves from './Serves'

// const { empName } = useUserStore()
const tabOpen = ref(false)
const store = useStore()
const searchState = ref({})
const loading = ref(false)
const dataSource = ref([])
const emit = defineEmits(['serve'])
const selectedItem = ref(null)
const typeList = ref([
  { typeState: '0,3', title: '服务中', total: 0 },
  { typeState: '1', title: '已结束', total: 0 }
])
const actionArray = ref([
  { value: 1, title: '开始服务' },
  { value: 2, title: '撤销服务' },
  { value: 3, title: '结束服务' }
])

const typeState = ref('0,3')
const onSelect = (item) => {
  selectedItem.value = item
  store.currentPatient = item
}

const queryList = async (stat = 0) => {
  loading.value = true
  const { code, data, msg } = await post('/course/courseProgressNotes/getCourseProgressList', {
    pyjm: searchState.value?.searchKey,
    startTime: searchState.value?.startDate,
    endTime: searchState.value?.endDate,
    status: typeState.value.split(',')
  })
  loading.value = false
  if (code !== 0) return message.error(msg || '查询失败')
  typeList.value.forEach((item) => {
    item.total = item.typeState === '1' ? data.yjs : data.fwz + data.dhz
  })
  dataSource.value = data.courseProgressList

  if (stat !== 0) {
    dataSource.value.forEach((item) => {
      if (item.lsh === selectedItem.value.lsh) {
        onSelect(item)
      }
    })
  } else {
    selectedItem.value = data.courseProgressList?.[0] || {}
    store.currentPatient = data.courseProgressList?.[0] || {}
  }
}
const onClickServe = async (row, value) => {
  if (value === 1) {
    //开始服务
    emit('serve', row.lsh, 3)
  } else if (value === 2) {
    //撤销服务
    store.currentPatient = row
    tabOpen.value = true
  } else {
    //结束服务
    emit('endserve', row)
  }
}
defineExpose({
  queryList
})
</script>

<style lang="less" scoped>
.visit-typeState:hover {
  color: #fff;
  background-color: var(--primary-color);
}
.radio-style {
  :deep(.ant-radio-button-wrapper) {
    width: 50%;
    padding: 0;
    text-align: center;
  }
}
</style>
